<template>
    <div>
        <div class="nav">
            <el-menu :default-active="route.name" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <div
                    style="font-size: 28px; color: rgb(255,22,75); line-height: 60px; align-items: center; margin-left: 15px; margin-right: 50px;">
                    冬冬的个人博客</div>
                <el-menu-item @click="home" index="home">
                    <el-icon>
                        <Sugar />
                    </el-icon>
                    首页
                </el-menu-item>
                <el-menu-item @click="aboutMe" index="aboutMe">
                    <el-icon>
                        <Lollipop />
                    </el-icon>
                    关于我
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <IceTea />
                    </el-icon>
                    随笔
                </el-menu-item>
                <div class="btn-dl">
                    <el-button type="warning">登录</el-button>
                    <el-button type="warning">注册</el-button>
                </div>
            </el-menu>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const handleSelect = (key: string, keyPath: string[]) => {
    //   console.log(key, keyPath)
}
// let activeIndex = ref('1')
const home = () => {
    router.push('/')
}
const aboutMe = () => {
    router.push('/aboutMe')
}
</script>
<style lang="less" scoped>
/deep/ .el-menu {
    background-color: rgba(255, 255, 255, 0.1);
    // border-bottom: 0px;
}

/deep/ .el-card {
    background-color: rgba(255, 255, 255, 0.8);
    margin: 20px;
}

.nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
}

.btn-dl {
    position: absolute;
    right: 10px;
    top: 15px;
}
</style>